<template>
  <div class="questions-randoms">
      <el-card>
        <el-row>
      <el-form  :inline="true" size="small" style="margin-left:26px" >
         <el-col :span="18" >
       <el-form-item label="关键字">
        <el-input v-model.trim="keyword" placeholder="根据编号搜索" style="width: 240px;"></el-input>
       </el-form-item>
         </el-col>
          <el-col :span="6" style="text-align:right">
      <el-form-item style="margin-right:0px">
        <el-button  size="small"  @click="reste">清除</el-button>
        <el-button type="primary"  size="small" @click="search">搜索</el-button>
      </el-form-item>
          </el-col>
    </el-form>
        </el-row>

           <el-alert style="margin-bottom:15px;"
           :title="counts"
         type="info"
         :closable="false"
        show-icon>
       </el-alert>

        <el-table :data="randomsArray"  style="width:100%" :header-cell-style="headClass" v-loading='loading'>
          <el-table-column label="编号" prop="id"  />
          <el-table-column label="题型" prop="questionType" :formatter="formatEmployment"  />
          <el-table-column label="题目编号"  prop="questionIDs">
            <template #default="{row}">
              <!-- <el-link type="primary" v-for="(item,i) in row.questionIDs" :key="i" @click="Look(row.questionID[i])">{{item}}</el-link> -->
              <el-link :underline="false" type="primary" @click="Look(item.id)" v-for="item in row.questionIDs" :key="item.number" >
              {{item.number}}
              </el-link>
<!-- {{row.questionIDs}} -->
           </template>
          </el-table-column>
          <el-table-column label="录入时间" prop="addTime" />
          <el-table-column label="答题时间(s)" prop="totalSeconds" />
          <el-table-column label="正确率(%)" prop="accuracyRate"/>
          <el-table-column label="录入人" prop="userName" />
          <el-table-column label="操作">
            <template #default="{row}" >
             <el-button @click="del(row.id)"  type="danger" icon="el-icon-delete" size="small" plain  circle></el-button>
            </template>
          </el-table-column>
        </el-table>
             <!-- 分页组件 -->
        <div style="margin-top: 20px; text-align: right;margin-left:-20px!important">
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[20,30,50,100]"
      :page-size="pagesize"
       background
      layout=" prev, pager, next, sizes,jumper"
      :total="total">
    </el-pagination>
        </div>
      </el-card>

<!-- //弹出层 -->
<el-dialog
  style="font-size: 14px!important;"
  title="题目预览"
  @close="handleClose"
  :visible.sync="dialogVisible"
  width="900px"
  :before-close="handleClose">
  <el-row  >
    <el-col  :span="6"  class="span">
  <span v-if="+dialogFrom.questionType===1">【题型】 :  单选</span>
  <span v-if="+dialogFrom.questionType===2">【题型】 :  多选</span>
  <span v-if="+dialogFrom.questionType===3">【题型】 :  简答</span>
    </el-col>
    <el-col :span="6"  class="span">
  <span>【编号】 :  {{dialogFrom.id}}</span>
    </el-col>
    <el-col :span="6"   class="span">
  <span v-if="+dialogFrom.difficulty===1">【难度】 :  简单</span>
  <span v-if="+dialogFrom.difficulty===2">【难度】 :  一般</span>
  <span v-if="+dialogFrom.difficulty===3">【难度】 :  困难</span>
    </el-col >
    <el-col :span="6" class="span" >
  <span>【标签】 :  {{dialogFrom.tags}}</span><br>
    </el-col>
    <el-col :span="6"  class="span">
  <span>【学科】 :  {{dialogFrom.subjectName}}</span>
    </el-col>
    <el-col :span="6"  class="span">
  <span>【目录】 :  {{dialogFrom.directoryName}}</span>
    </el-col>
  <el-col :span="6"  class="span">
  <span>【方向】 :  {{dialogFrom.direction}}</span>
  </el-col>
</el-row>
 <hr/>
 <span>【题干】 : </span><br>
    <div v-html="dialogFrom.question" style="  color: blue;">
    </div>
<div v-if="!(+dialogFrom.questionType===3)">
  <div v-if="+dialogFrom.questionType===1"><span style="display:block;margin:6px 0!important">单选题 选项:(以下选中的选项为正确答案)</span>
  <el-radio class="radio" :value="check"  :label="item.id" style="display:block;padding:8px 0"  v-for="(item,i) in dialogFrom.options" :key="i"  >
    {{item.title}}
  </el-radio>
  </div>
  <div v-if="+dialogFrom.questionType===2"><span style="display:block;margin:6px 0!important">多选题 选项:(以下选中的选项为正确答案)</span>
  <el-checkbox  class="radio" :value="checkList"  :label="item.id" style="display:block;padding:8px 0"  v-for="(item,i) in dialogFrom.options" :key="i"  >
    {{item.title}}
  </el-checkbox>
  </div>

</div>
   <div v-else > </div>
   <hr/>
   【参考答案】 :  <el-button type="danger" size="mini" @click="divshow=!divshow" >视频答案预览</el-button>
   <div style="width:400px;height:300px" v-if="divshow">
     <video height="300px" controls="controls" class="video" :src="dialogFrom.videoURL"></video>
     </div><hr/>
   【答案解析】 :  <span style="display: inline-block;" v-html="dialogFrom.answer"> </span><hr/>
   【题目备注】 :  <span style="display: inline-block;" v-html="dialogFrom.remarks"></span>
  <span slot="footer" style="text-align: right;" class="dialog-footer">
    <div>
    <el-button style="" type="primary" @click="handleClose">关闭</el-button>
    </div>
  </span>
</el-dialog>

    </div>

</template>

<script>
import { randoms, removeRandoms, detail } from '../../api/hmmm/questions'
import { questionType } from '../../api/hmmm/constants.js'

export default {
  name: 'Permission',
  data () {
    return {
      dialogVisible: false,
      radio: 1,
      total: 0,
      randomsArray: [],
      page: 1,
      pagesize: 20,
      keyword: '',
      counts: '',
      dialogFrom: [],
      checkList: [],
      check: '',
      divshow: false,
      loading: false
    }
  },

  created () {
    this.getRandoms()
  },
  methods: {
    // 表头颜色
    headClass () {
      return 'background:#fafafa'
    },

    handleClose () {
      this.dialogVisible = false
    },
    // 获取列表
    async getRandoms (keyword) {
      this.loading = true
      // 判断搜索输入框是否有内容，有搜索内容就将传入的page设置为第一页
      const obj = { page: this.page, pagesize: this.pagesize }
      if (keyword) {
        if (this.keyword) this.page = 1
        obj.keyword = keyword
      }
      const { data } = await randoms(obj)
      this.total = data.counts
      this.counts = '数据一共有' + this.total + '条'
      this.randomsArray = data.items
      this.searchShow = false
      this.loading = false
    },
    // 设置题型
    formatEmployment (row, column, cellValue, index) {
      const res = questionType.find(item => item.value === +cellValue)
      return res ? res.label : '未知'
    },
    // 清除
    reste () {
      this.keyword = ''
      this.getRandoms()
    },
    // 搜索
    search () {
      this.page = 1
      this.getRandoms(this.keyword)
    },
    // 删除
    async del (id) {
      this.$confirm('此操作将永久删除该题组', '提示', { type: 'warning' }).then(async () => {
        await removeRandoms({ id })
        if (this.randomsArray.length === 1 && this.page > 1) {
          this.page--
        }
        await this.getRandoms(this.keyword)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(e => e)
    },
    // 每页显示条数改变时
    handleSizeChange (newSize) {
      this.pagesize = newSize
      this.page = 1
      this.getRandoms()
    },
    // 页码值改变时
    handleCurrentChange (newPage) {
      this.page = newPage
      this.getRandoms()
    },
    // 弹出层
    async Look (id) {
      this.dialogVisible = true
      const { data } = await detail({ id })
      this.dialogFrom = data
      if (+this.dialogFrom.questionType === 1) {
        const res = this.dialogFrom.options.find(ele => {
          return ele.isRight === 1
        })
        this.check = res.id
      } else if (+this.dialogFrom.questionType === 2) {
        this.dialogFrom.options.forEach(ele => {
          if (+ele.isRight === 1) {
            this.checkList.push(ele.id)
          }
        })
      }
    }

  }
}
</script>
<style lang="scss" scoped>
.questions-randoms{
  padding: 10px;

}
.span{
  // margin-top: 10px;
  padding:10px 0 !important;

}
.video{
  width: 100% !important;;
  height:100% !important
}
::v-deep .el-loading-mask{
  z-index: 998;
}
</style>
